<template>
<div class="page chart">
  <header-bar>
    <icon-button slot="left"  icon="arrow_back" @click="back"></icon-button>
    <div class="title">
      统计图
    </div>
  </header-bar>
  <content>
    <content-title>在线人数走势图</content-title>
    <content-block>
      <canvas v-el:onlinechart style="background-color:#ffffff;"></canvas>
    </content-block>
    <content-title>弹幕&礼物走势图</content-title>
    <content-block>
      <canvas v-el:contrastchart style="background-color:#ffffff;"></canvas>
    </content-block>
    <content-title>礼物分布图</content-title>
    <content-block>
      <canvas v-el:giftchart style="background-color:#ffffff;"></canvas>
    </content-block>
  </content>
</div>
</template>
<script>
import Chart from 'chart.js/src/chart'
export default {
  ready () {
    Chart.defaults.global.fullWidth = true
  },
  attached () {
    console.log(this.$route.params.id)
    console.log(this.$route.params.platform)
    this.init(this.$route.params.id, this.$route.params.platform)
  },
  methods: {
    init: function (roomId, platform) {
      let room = this.$RoomManage.getRoom(platform.concat('_').concat(roomId))
      if (room) {
        var onLineChart = new Chart(this.$els.onlinechart, room.getOnLineChart())
        var contrastChart = new Chart(this.$els.contrastchart, room.getContrastChart())
        var giftChart = new Chart(this.$els.giftchart, room.getGiftChart())
        return [onLineChart, contrastChart, giftChart]
      }
      return null
    },
    back: function () {
      this.$router.go({name: 'home'})
    }
  }
}
</script>

<style lang="less">
.chart .content-block,.chart .content-title{
  max-width: 1200px;
  margin: 0px auto;
}
.chart .content-title{
  padding: 20px 10px;
}
</style>
